import Vue from 'vue'
import Modal from './Modal'
import context from './context'

const modalDefaultConfig = {
  className: '',
  customStyle: {}
}

const manager = {
  getModal () {
    let {modal} = context

    if (!modal) {
      const ModalConstructor = Vue.extend(Modal)
      modal = new ModalConstructor({
        el: document.createElement('div')
      })
      modal.$on('click', () => {
        manager.onClickMask()
      })

      context.modal = modal
    }

    return modal
  },

  // close popup when click modal && closeOnClickMask is true
  onClickMask () {
    const {top} = context
    if (top) {
      const {instance} = top
      if (instance && instance.closeOnClickMask) {
        instance.close()
      }
    }
  },

  openModal (instance, config) {
    const {id, dom} = config
    const exist = context.stack.some(item => item.id === id)

    if (!exist) {
      const targetNode = dom && dom.parentNode && dom.parentNode.nodeType !== 11 ? dom.parentNode : document.body
      context.stack.push({instance, id, config, targetNode})
      this.updateModal()
    }
  },

  closeModal (id) {
    const {stack} = context

    if (stack.length) {
      if (context.top.id === id) {
        stack.pop()
        this.updateModal()
      } else {
        context.stack = stack.filter(item => item.id !== id)
      }
    }
  },

  updateModal () {
    const modal = this.getModal()

    if (modal.$el.parentNode) {
      modal.visible = false
    }

    if (context.top) {
      const {targetNode, config} = context.top

      targetNode.appendChild(modal.$el)
      Object.assign(modal, {
        ...modalDefaultConfig,
        ...config,
        visible: true
      })
    }
  }
}

export default manager
